<!DOCTYPE html>
<html>
<head>
	<title>测试：请求.刷新部分html</title>
</head>
<style type="text/css">
	html ,body{
		height:100%;
	}
	h1{
		margin:0;
		padding:0;
	}
	.main{
		display: flex;
		width:800px;
		height:100%;
		flex-direction:row;
		justify-content:center;
	}
	.left{
		width:200px;
		height:100%;
		background-color: #ded8d8;
	}
	.left button{
		width:100%;
	}
	.right{
		border:1px solid #ccc;
		width:600px;
		height:100%;
		background-color: #fff;
	}
	.mgt-10{
		margin-top:10px;
	}
</style>
<body>
	<h1>局部刷新页面</h1>
	<p class="tips">点击按钮，请求html，动态刷新右测</p>
	<div class="main">
		<div class="left">
			<div>
				<button class="btn">button-1</button>
			</div>
			<div>
				<button class="btn">button-2</button>
			</div>
		</div>
		<div class="right"></div>
	</div>
	<script type="text/javascript" src="../jquery-3.1.1.js"></script>
	<script type="text/javascript" src="./ajax.js"></script>
	<script type="text/javascript">
		//确定
		$(".btn").click(function(){
			// 发送请求， f12 的network 可以看到发送的请求的信息，返回的信息
			$.ajax({
				url:"http://localhost/demo.jw/ajax.right-block/test.php",
				dataType:"text",
				type:"GET",
				success:function(respondData){
					$(".right").html(respondData);
				},
				error:function(errInfo){
					console.log(errInfo);
				}
			});
		});

		var tool ={
			checkIsPhone:function (phone){
				return /^1[3568]\d{9}/.test(phone);
			},
			fieldIsNull:function(text){
				// 检查字符串是否为空
				return !text.trim();
			},
			checkPwdIsCorrect:function(pwd,pwd_repeat){
				return pwd.trim() != pwd_repeat.trim();
			}
		}
	</script>
</body>
</html>